<template>
  <view class="wrapper">
      <view @tap="change(item.id)" :class="{item:true,active:activeIndex === item.id}" v-for="item in tabtext" :key="item.id">{{item.name}}</view>
     
  </view>
</template>

<script>
export default {
    props:['tabtext'],
    data() {
        return {
            activeIndex:0
        }
    },
    methods: {
        change(id){
            this.activeIndex = id
            this.$emit('active',id)
        }
    },
}
</script>

<style lang="less" scoped>
    .wrapper{
        height: 80rpx;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .item{
            width: 188rpx;
            text-align: center;
          
        }
        .active{
                border-bottom: 1px solid red;
          }
    }
</style>